<template>
  <div class="shopdetails">
    <!-- 轮播图 -->
    <van-swipe :autoplay="8000" @change="onChange">
      <van-swipe-item v-for="(item,index) in swipe" :key="index">
        <van-image :src="item"></van-image>
      </van-swipe-item>
      <div class="swipecount custom-indicator" slot="indicator">{{ current + 1 }}/{{swipe.length}}</div>
    </van-swipe>
    <div class="iconfont-css" @click="toback">
      <i class="iconfont icon-back"></i>
    </div>
    <!-- 商品信息 -->
    <van-cell-group>
      <van-cell>
        <div class="goods-price">
          <div>
            <span class="goods-newPrice">
              <span>￥</span>
              {{ shopData.price }}
            </span>
            <span class="goods-oldPrice">￥{{shopData.old_price}}</span>
            <span class="goods-people">{{shopData.people}}人已购</span>
          </div>
        </div>
        <div class="goods-title">{{shopData.name}}</div>
      </van-cell>
    </van-cell-group>
    <!-- 商品详情 -->
    <div class="details">
      <van-tabs v-model="active">
        <!-- 图文详情 -->
        <van-tab title="图文详情">
          <div class="imgss" v-for="(item,index) in detailsImgData" :key="index">
            <van-image :src="item"></van-image>
          </div>
        </van-tab>
        <!-- 商品参数 -->
        <van-tab title="商品参数">
          <div class="parameter">
            <van-cell-group>
              <van-field label="常用快递" placeholder="顺丰快递" disabled />
              <van-field label="运费" placeholder="全国包邮(偏远地区除外)" disabled />
            </van-cell-group>
          </div>
        </van-tab>
        <!-- 咨询与售后 -->
        <van-tab title="咨询与售后">
          <div class="parameter">
            <div class="text">
              <p class="title">在卷皮购物有哪些服务保障？</p>
              <p>
                卷皮为您提供
                <strong>“人工质检”“闪电发货”“精选品牌商”“7天无理由退货”“退货返运费”</strong>等服务，让您轻松购物有保障。
              </p>
            </div>
            <div class="text">
              <p class="title">如何选择商品尺码？</p>
              <div>
                <p>商品详情页会展示所售商品的尺码表，可能会存在1~2cm的正常误差范围。</p>
                <p>由于每个人的身材具体尺寸都不一样，为了对您负责我们根据身高体重为您推荐的也不一定准确，建议您可以根据商品详情页面的尺码表测量自身数据后选择更稳妥哦~</p>
              </div>
            </div>
            <div class="text">
              <p class="title">可以指定快递吗？</p>
              <p>
                商品详情页面会显示默认发货快递，商家也会根据您的地址自动匹配当地运营较好的快递公司安排配送，暂
                <strong>不接受指定快递</strong>哦~
              </p>
            </div>
            <div class="text">
              <p class="title">下单后什么时候发货？</p>
              <div>
                <p>
                  卷皮承诺买家付款成功后，商家将在
                  <strong>24h</strong>内完成发货(特殊情况除外)。
                </p>
                <p>由于部分快递公司无法实时更新信息，您看到的物流情况可能会有延迟。</p>
              </div>
            </div>
            <div class="text">
              <p class="title">购买后不喜欢可以退货么？</p>
              <p>
                卷皮严格按照消费者保障服务，商品自签收后
                <strong>7天内</strong>，在不影响二次销售的情况下，卷皮为您提供7天无理由退货服务（特殊商品除外）。
              </p>
            </div>
            <div class="text">
              <p class="title">退货后运费谁来承担？</p>
              <p>用户提交售后申请，售后完成后，系统会根据退货责任方与商品单价判断并补贴运费的哦~</p>
            </div>
            <div class="text">
              <p class="title">价格说明</p>
              <div>
                <p>1.商品的未划横线价格（显示如65）为卷皮销售价，在没有满减、额外折扣的情况下，该价格是交易成交价，是您最终决定是否购买商品的依据。</p>
                <p>2.商品的划横线价格为参考价，采集自品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价可能会与您购物时展示的不一致，该价格仅供您参考。</p>
                <p>3.商品的折扣比为卷皮销售价与参考价的对比（该值四舍五入后采小数点后1位，如24.9/65=0.38307=3.8折），该对比值仅供您参考，不作为结算基数。</p>
                <p>4.商品促销信息以商品详情页“促销”栏中的信息为准；最终交易成交价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，请购买前先联系客服咨询。</p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 商品规格 -->
    <van-action-sheet v-model="show" :round="false">
      <!-- 商品选择信息 -->
      <div class="shop-select">
        <!-- 图片 -->
        <div class="image">
          <van-image width="85" height="85" :src="specsImage" />
        </div>
        <!-- 商品信息 -->
        <div class="shop">
          <!-- 价格 -->
          <span class="sprice">￥{{stepprPrice}}</span>
          <!-- 库存 -->
          <p class="stock">库存剩余：{{specs_shop.stock}}件</p>
          <!-- 已选择商品 -->
          <span>已选择：{{buyshop[0]}}{{buyshop[1]}}{{buyshop[2]}}</span>
        </div>
        <!-- 关闭 -->
        <div class="edit" @click="edit">X</div>
      </div>
      <!-- 商品规格 -->
      <div class="shop-specs">
        <!-- 一级 -->
        <div>
          <p>{{specs_title[0]}}</p>
          <van-button
            @click="selectoption(index, 0)"
            type="default"
            size="small"
            v-for="(item,index) in specs_one"
            :key="index"
          >{{item}}</van-button>
        </div>
        <!-- 二级 -->
        <div v-if="specs_two.length !== 0">
          <p>{{specs_title[1]}}</p>
          <van-button
            @click="selectoption(index, 1)"
            type="default"
            size="small"
            v-for="(item,index) in specs_two"
            :key="index"
          >{{item}}</van-button>
        </div>
        <!-- 三级 -->
        <div v-if="specs_three.length !== 0">
          <p>{{specs_title[2]}}</p>
          <van-button
            @click="selectoption(index,2)"
            type="default"
            size="small"
            v-for="(item,index) in specs_three"
            :key="index"
          >{{item}}</van-button>
        </div>
      </div>
      <!-- 购买数量 -->
      <div class="steepr">
        <div class="title">购买数量</div>
        <div class="steppr-div">
          <van-stepper v-model="steppr" @change="pricestpper" />
        </div>
      </div>
      <van-button type="danger" size="large" @click="tocart(shopData.id,steppr,buyshop)">确定</van-button>
    </van-action-sheet>
    <!-- 底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" to="/" text="首页" />
      <van-goods-action-icon icon="cart-o" @click="onClickCart" text="购物车" />
      <van-goods-action-button type="warning" @click="showdetails" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template> 

<script>
export default {
  data() {
    return {
      active: 0, // tab选中项
      current: 0, // 轮播图步进数
      swipe: [], // 轮播图
      shopData: [], // 商品数据
      detailsImgData: [], // 商品详情
      specs_shop: {}, // 规格参数
      specs_title: [], // 规格标题
      specs_one: [], // 规格数据
      specs_two: [], // 规格数据
      specs_three: [], // 规格数据
      show: false, // 控制上拉框显示
      steppr: 1, // 商品步进
      stepprPrice: 0, // 结算后的价格
      imageIndex: 0, // 规格图片的索引
      specsImage: "", // 规格图片
      shopID: 0, // 商品id
      buyshop: [], // 选定的商品
      buyshop_one: "", // 一级选中项
      buyshop_two: "", // 二级选中项
      buyshop_three: "" // 三级选中项
    };
  },
  methods: {
    // 轮播图
    onChange(index) {
      this.current = index;
    },
    // 请求商品数据
    getShop(id) {
      this.$http.get("/shop_details", { params: { id: id } }).then(res => {
        let shop = res.data.data[0];
        // 轮播图
        this.swipe = shop.swipe_image.split(",");
        // 商品数据
        this.shopData = {
          id: shop.id,
          name: shop.shop_name,
          price: shop.shop_price,
          old_price: shop.shop_old_price,
          people: shop.shop_buy_number
        };
        // 详情图片
        this.detailsImgData = shop.details_image.split(",");
        // 规格参数
        this.specs_shop = {
          name: res.data.specs.name,
          diffPrice: res.data.specs.diffPrice,
          price: res.data.specs.price,
          stock: res.data.specs.stock,
          image: res.data.specs.image
        };
        // 规格标题
        this.specs_title = res.data.specs.title;
        // 规格数据
        this.specs_one = res.data.specs.specs_one;
        // 规格数据
        this.specs_two = res.data.specs.specs_two;
        // 规格数据
        this.specs_three = res.data.specs.specs_three;
        // 计算价格
        this.pricestpper();
        // 规格图片
        this.specsImage = this.specs_shop.image[0];
      });
    },
    // 去购物车
    onClickCart() {
      this.$router.push("/cart");
    },
    // 加入购物车大按钮
    showdetails() {
      this.show = true;
    },
    // 退出商品规格选择
    edit() {
      this.show = false;
    },
    // 商品步进
    pricestpper() {
      this.stepprPrice = this.steppr * this.specs_shop.price;
    },
    // 选中商品规格
    selectoption(index, num) {
      // 第一层
      if (num == 0) {
        this.imageIndex = index;
        this.specsImage = this.specs_shop.image[this.imageIndex];
        this.buyshop_one = this.specs_one[index];
      }
      // 第二层
      if (num == 1) {
        this.buyshop_two = this.specs_two[index];
      }
      // 第三层
      if (num == 2) {
        this.buyshop_three = this.specs_three[index];
      }
      // 保存数据
      this.buyshop = [this.buyshop_one, this.buyshop_two, this.buyshop_three];
      // 变颜色
      let btus = document
        .querySelectorAll(".shop-specs > div")
        [num].querySelectorAll(".van-button");
      let btu = btus[index];
      btus.forEach(v => {
        v.classList.remove("van-button--danger");
      });
      btu.classList.add("van-button--danger");
    },
    // 添加购物车
    tocart(id,steppr,buyshop) {
      this.show = false;
      console.log(id,steppr,buyshop)
      localStorage.setItem('shopcartid',id)
      localStorage.setItem('shopcartsteppr',steppr)
      localStorage.setItem('shopcartbuyshop',buyshop)
    },
    // 退回分类
    toback() {
      this.$router.push({
        path: "/class_children",
        query: { id: this.$route.query.id }
      });
    }
  },
  created() {
    this.getShop(this.$route.query.id);
  }
};
</script>
<style lang="less">
.shopdetails {
  padding-bottom: 50px;
  .iconfont-css {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    border-radius: 50%;
    background-color: rgba(140, 140, 140, 0.8);
  }
  .van-swipe {
    position: relative;
    .swipecount {
      width: 50px;
      height: 25px;
      border-radius: 5px;
      background-color: rgba(140, 140, 140, 0.8);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 25px;
      position: absolute;
      bottom: 30px;
      right: 20px;
    }
  }
  .goods-price {
    color: #ff464e;
    margin-bottom: 10px;
    overflow: hidden;
    .goods-newPrice {
      position: relative;
      font-size: 24px;
      margin-left: 15px;
      span {
        position: absolute;
        top: 6px;
        left: -15px;
        font-size: 18px;
      }
    }
    .goods-oldPrice {
      font-size: 12px;
      margin-left: 10px;
      color: #bbbbbb;
      text-decoration: line-through;
    }
    .goods-people {
      float: right;
      font-size: 12px;
      color: #999;
    }
  }
  .goods-title {
    font-size: 18px;
  }
  .details {
    padding-top: 20px;
    background-color: #f4f4f8;
    .imgss {
      margin-top: 10px;
    }
    .parameter {
      margin-top: 10px;
      background-color: #f4f4f8;
      .text {
        margin: 20px 30px 10px 30px;
        color: #9b9b9b;
        p {
          margin: 0;
        }
        .title {
          color: #444;
          margin: 10px 0 5px 0;
        }
      }
    }
  }
  .shop-select {
    overflow: hidden;
    .image {
      width: 100px;
      height: 100px;
      float: left;
      .van-image {
        margin: 15px 0 0 15px;
      }
    }
    .shop {
      float: left;
      margin: 15px 0 0 20px;
      color: #666;
      .sprice {
        color: #ff464e;
        font-size: 20px;
        font-weight: 800;
      }
      .stock {
        margin: 5px 0;
      }
    }
    .edit {
      padding: 15px 10px 0 0;
      color: #333;
      float: right;
    }
  }
  .shop-specs {
    margin-top: 20px;
    margin-left: 15px;
    p {
      font-size: 16px;
      margin: 0;
    }
    .van-button {
      margin: 10px;
    }
    .van-button--danger {
      color: #fff;
      background-color: #ee0a24;
      border: 1px solid #ee0a24;
    }
  }
  .steepr {
    margin: 10px 15px 30px;
    overflow: hidden;
    .title {
      float: left;
      font-size: 16px;
    }
    .steppr-div {
      float: right;
    }
  }
}
</style>